<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4609705_x3e6km7kwtn.css">
</head>
<body>
    <style>
        #zhengge{
            width: 900px;
            height: 436px;
            border-radius: 8px;
            overflow: hidden;
            margin: auto;
            display: flex;
            position: relative; 
            background-color: azure;
        }
        .zuobian{
            position: relative;
            width: 400px;
            & .saomiao{
                text-align: center;
                margin: 20px 0;
            }
        }
        #fei .tupian{
            margin: auto;
        }
        #fei img{
            width: 200px;        
        }
        #fei .tu2{
            width: 400px;
            position: absolute;
            top: 40px;
            left: 0px;
        }
        #fei .tu3{
            width: 200px;
            position: absolute;
            top: 62px;
            left: 100px;
        }
        #fei .saoma{
            text-align: center;
            & a{
                text-decoration: none;
            }
        }
    </style>
    <div id="zhengge">
        <div class="zuobian" >
    <div id="fei">
        <p class="saomiao" v-show="img===1">扫描二维码登录</p>
        <p class="saomiao" v-show="img===2">扫描二维码登录</p>
        <p class="saomiao" v-show="img===3">扫码下载客户端</p>
        <div class="tupian" style="width: 200px;height: 200px;"  @mouseover="img=2" @mouseout="img=1">
            <img v-show="img===1" src="./image/lQLPJxPXYE45El_MoMygsCKwshPvfCWxBqgRyK5IfgQ_160_160.png" alt="">
            <img class="tu2" v-show="img===2" src="./image/lQLPJxVVXT3WJc_NAYDNApSwKQ2RyXWUkFkGp-xVrMg0AA_660_384.png" alt="">
            <img class="tu3" v-show="img===3" src="./image/4a0498e02ddc05d56f63a0dc427f3a8d.png" alt="">
        </div>
        <p class="saoma">请使用<a @mouseover="img=3" @mouseout="img=1" href="https://app.bilibili.com/?spm_id_from=333.1007.0.0">哔哩哔哩客户端</a><br />扫码登录或扫码下载APP</p>
    </div>  
    </div>


    <style>
        .youbian{
            margin: 20px auto;
            text-align: center;
        }
        .shuru{
            width: 400px;
            height: 100px;
            text-align: center;
            margin: 20px 0;
            border: 1px solid black;
            border-radius: 8px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
        }
        .zhanghao{
            position: relative;
        }
        .zhanghao::after{
            display: block;
            content: "";
            position: absolute;
            bottom: -16px;
            left: -22px;;
            width: 400px;
            height: 1px;
            background-color: black;
        }

        .zhanghao1{
            position: relative;
            display: flex;
        }
        .zhanghao1::after{
            display: block;
            content: "";
            position: absolute;
            bottom: -16px;
            left: -15px;;
            width: 400px;
            height: 1px;
            background-color: black;
        }
        .youbian img{
            width: 100px;
        }
        .zhengyan{
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .biyan{
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .wangji{
            color: #285fde;
        }
        .anniu{
            display: flex;
            justify-content: space-between;
            & a:nth-child(1){
                text-decoration: none;
                color: black;
            }
            & a:nth-child(2){
                text-decoration: none;
                color: white;
            }
        }

        .anniu1{
            display: flex;
            justify-content: center;
            & a{
                text-decoration: none;
                color: white;
            }
        }


        .zhuce{
            width: 190px;
            height: 40px;
            line-height: 40px;
            border-radius: 8px;
            border: 1px solid black;
        }
        .denglu{
            width: 190px;
            height: 40px;
            line-height: 40px;
            border-radius: 8px;
            background-color: hsl(193, 100%, 46%);
            border: 1px solid black;
        }
        .mi{
            padding: 0 20px;
        }
        .bule{
            color: #285fde;
        }
        .feifei{
            position: absolute;
            top: 39px;
            left: -23px;
            background-color: white;
            display: flex;
            border-radius: 8px;
            flex-direction: column;
            flex-wrap: wrap;
        }
        .tubiao{
            width: 400px;
            height: 50px;
            line-height: 50px;
            /* background-color: aqua; */
            display: flex;
            justify-content: space-around;
            & a{
                text-decoration: none;
            }
        }
        .icon-weixin{
            width: 50px;
            height: 50px;
            font-size: 25px;
            border-radius: 50%;
            color: white;
        }
        .icon-xinlangweibo{
            font-size: 25px;
            border-radius: 50%;
            color: white;
        }
        .icon-QQ{
            font-size: 25px;
            border-radius: 50%;
            color: white;
        }
        .xiaotubiao{
            display: flex;
            align-items: center;
        }
        .xiamian{
            position: absolute;
            bottom: -5px;
            left: 255px;
            text-align: center;
            & a{
                text-decoration: none;
                color: rgb(24, 59, 218);
            }
        }
        .wangjimima{
            position: absolute;
            bottom: 190px;
            right: 10px;
            background-color: white;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            z-index: 99;
        }
    </style>
    <div class="youbian">
        <div id="fei1">
            <span class="mi" @click="qiehuan=1" :class="{'bule':qiehuan === 1}">密码登录</span>
            <span class="mi" @click="qiehuan=2" :class="{'bule':qiehuan === 2}">短信登录</span>
            <div class="shuru" v-show="qiehuan===1">
                <div class="zhanghao"><span>账号</span><input style="width: 320px; border: none; background-color: rgba(255, 255, 255, 0); outline: none;" type="text" placeholder="请输入账号"></div>
                <div class="mima"><span>密码</span><input @focus="child=1" @blur="child=2" style="width: 185px; border: none; background-color: rgba(255, 255, 255, 0);outline: none;" :type="displayThePassword?'text':'password'" placeholder="请输入密码"></div>
                <span class="iconfont icon-guanbi" @click="eye=1;displayThePassword=!displayThePassword" v-show="eye===2"></span>
                <span class="iconfont icon-xianshimima"  @click="eye=2;displayThePassword=!displayThePassword" v-show="eye===1"></span>
                
                
                <span class="wangji" @click="wangjile=!wangjile">忘记密码？</span>
                <div class="wangjimima"><span v-show="wangjile" v-for="(a,b) in wangJi">{{a.name}}</span>
                    <span v-show="wangjile" v-for="(a,b) in wangJi">{{a.Name}}</span></div>
                
                
                <img class="zhengyan" src="./image/lQLPJyG7gB9Lcl_M0szpsHa6ppeuapbjBqgRyK5Ifgc_233_210.png"  v-show="child===1" alt="">
                <img class="zhengyan" src="./image/lQLPKc9WspCxwl_M0szosM6vP2lR2j1jBqgRyK5IfgY_232_210.png"  v-show="child===2" alt="">
                <img class="biyan" src="./image/lQLPJyEOskzJkl_M1MzYsJdFk_wsT_FMBqgRyK5IfgU_216_212.png" v-show="child===1" alt="">
                <img class="biyan" src="./image/lQLPKHDdC5GaIl_M1MzYsFIdi2LKnhWXBqgRyK5IfgA_216_212.png" v-show="child===2" alt="">
            </div>

            <div class="anniu" v-show="qiehuan===1">
                <a @click="qiehuan=2"><div class="zhuce"><span>注册</span></div></a>
                <a><div class="denglu"><span>登录</span></div></a>
            </div>
        
            <div class="shuru" v-show="qiehuan===2">
                <div class="zhanghao1"><span @click="selectOpen=!selectOpen">{{shoujihao[moren].hao}}</span><input style="width: 255px; border: none; background-color: rgba(255, 255, 255, 0); outline: none;" type="text" placeholder="请输入手机号"><div>
                    <button style="background-color: rgba(255, 255, 255, 0);border: none;">获取验证码</button></div>
                    <div class="feifei"><p v-show="selectOpen" @click="moren=index,selectOpen=false" v-for="(item,index) in shoujihao">{{item.name}}{{item.hao}}</p></div>
                </div>
                <div class="mima"><span>验证码</span><input @focus="child=1" @blur="child=2" style="width: 320px; border: none; background-color: rgba(255, 255, 255, 0); outline: none;" :type="displayThePassword?'text':'password'" placeholder="请输入验证码"></div>
                <img class="zhengyan" src="./image/lQLPJyG7gB9Lcl_M0szpsHa6ppeuapbjBqgRyK5Ifgc_233_210.png"  v-show="child===1" alt="">
                <img class="zhengyan" src="./image/lQLPKc9WspCxwl_M0szosM6vP2lR2j1jBqgRyK5IfgY_232_210.png"  v-show="child===2" alt="">
                <img class="biyan" src="./image/lQLPJyEOskzJkl_M1MzYsJdFk_wsT_FMBqgRyK5IfgU_216_212.png" v-show="child===1" alt="">
                <img class="biyan" src="./image/lQLPKHDdC5GaIl_M1MzYsFIdi2LKnhWXBqgRyK5IfgA_216_212.png" v-show="child===2" alt="">
            </div>
            <div class="anniu1" v-show="qiehuan===2">
                <a href=""><div class="denglu"><span>登录/注册</span></div></a>
            </div>

        </div>
        <p style="margin-top: 30px;">其他登陆方式</p>
        <div class="tubiao">
            <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxafc256bf83583323&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3D417bda0b5c471bf7a910ef4ea1375ee6%26sns_platform%3Dwechat%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&response_type=code&scope=snsapi_login&state=authorize#wechat_redirect">
                <div class="xiaotubiao"><div style="width: 30px;height: 30px;background-color: green;border-radius: 50%;line-height: 30px;"><span class="iconfont icon-weixin"></span></div><div><span style="color: #666;margin-left: 10px;">微信登陆</span></div></div></a>
            <a href="https://api.weibo.com/oauth2/authorize?client_id=2841902482&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3Da3ac1f37b25d7448a607592b17e6eb78%26sns_platform%3Dweibo%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&scope=email###">
                <div class="xiaotubiao"><div style="width: 30px;height: 30px;background-color: orangered;border-radius: 50%;line-height: 30px;"><span class="iconfont icon-xinlangweibo"></span></div><div><span style="color: #666;margin-left: 10px;">微博登录</span></div></div></a>
            <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=authorize&client_id=101135748&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3De85803a7aab5ccfc3b6dd4caa34dc92a%26sns_platform%3Dqq%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&scope=do_like,get_user_info,get_simple_userinfo,get_vip_info,get_vip_rich_info,add_one_blog,list_album,upload_pic,add_album,list_photo,get_info,add_t,del_t,add_pic_t,get_repost_list,get_other_info,get_fanslist,get_idollist,add_idol,del_idol,get_tenpay_addr">
                <div class="xiaotubiao"><div style="width: 30px;height: 30px;background-color: #285fde;border-radius: 50%;line-height: 30px;"><span class="iconfont icon-QQ"></span></div><div><span style="color: #666;margin-left: 10px;">QQ登录</span></div></div></a>
        </div>
    </div>
    <div class="xiamian">
        <p> 未注册过哔哩哔哩的手机号，我们将自动帮你注册账号 </p>
        <p> 登录或完成注册即代表你同意<a href="https://www.bilibili.com/protocal/licence.html"> 用户协议 </a>和<a href="https://www.bilibili.com/blackboard/privacy-pc.html"> 隐私政策 </a></p>
    </div>
    </div>
    
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref} = Vue
    createApp({
        setup(){
            let img = ref(1)
            return{
                img
            }
        }
    }).mount('#fei')

    createApp({
        setup(){
            let displayThePassword = ref(false)
            let eye = ref(2)
            let child = ref(2)
            let qiehuan = ref(1)
            let colour = ref('bule')
            let moren = ref(0)
            let selectOpen = ref(false) 
            let shoujihao = ref([{
                name:'中国内陆',
                hao:'+86'
            },{
                name:'中国香港特别行政区',
                hao:'+852'
            },{
                name:'中国澳门特别行政区',
                hao:'+853'
            },{
                name:'中国台湾',
                hao:'+886'
            },{
                name:'美国',
                hao:'+1'
            },{
                name:'比利时',
                hao:'+32'
            }])
            let moRen = ref(0)
            let wangjile = ref(false)
            let wangJi = ref([{
                name:'发送短信快速登录',
                Name:'去找回密码'
            },{
                name:'未注册或绑定哔哩哔哩的手机号,将帮你注册新账号',
                Name:'通过绑定的手机号邮箱重置密码'
            }])
            return{
                displayThePassword,
                eye,
                child,
                qiehuan,
                colour,
                shoujihao,
                moren,
                selectOpen,
                moRen,
                wangjile,
                wangJi
            }
        }
    }).mount('#fei1')

</script>
</html>